iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0

在今天的文章中,我們將探討 Android 中的線性排版(LinearLayout),這是一種常見的佈局方式。透過線性排版,我們可以方便地將多個元件排列在垂直或水平的方向上,並根據需求調整每個元件的顯示方式。學會使用 LinearLayout 是 Android UI 開發中非常重要的一環。

1. LinearLayout 的基本介紹

LinearLayout 是 Android 中的佈局元件,允許開發者在一個方向上排列子視圖(子元件)。它可以讓元件按照垂直或水平方向排列,這兩種排列方式由 android:orientation 屬性來決定。

水平排版範例

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />

</LinearLayout>

在這個範例中,LinearLayout 內部包含兩個按鈕,並且由於我們使用了 android:orientation="horizontal",這兩個按鈕會依次水平排列。

垂直排版範例

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 2" />

</LinearLayout>

這個例子中,我們改變了 orientation 屬性為 vertical,因此兩個 TextView 會依照垂直的方向排列。

2. LinearLayout 的進階屬性

除了基本的方向設定,LinearLayout 還有許多進階的屬性可以用來調整元件的佈局方式,常見的有 weight 和 gravity。

使用 layout_weight 來分配空間

layout_weight 屬性可以用來分配子元件之間的空間比例。例如,當有多個元件時,layout_weight 可以決定每個元件佔據的寬度或高度比例。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button 1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button 2" />

</LinearLayout>

在這個範例中,Button 1Button 2 使用了 layout_weight 屬性。Button 1layout_weight 為 1,而 Button 2 為 2,因此 Button 2 會佔據兩倍於 Button 1 的空間。

使用 gravity 來調整對齊方式
gravity 屬性決定了元件內部內容的對齊方式,可以用來控制元件的文本或圖標是靠左、靠右、居中或對齊其他方向。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Centered Text" />

在這裡,我們設置了 gravity="center",因此這個 TextView 中的文本會居中顯示。

3. LinearLayout 的應用場景

LinearLayout 非常適合用於需要簡單線性排列元件的場景,例如表單輸入頁面、工具欄等。當我們需要將多個元件以規律的方式排列時,LinearLayout 是最佳選擇之一。

然而,當佈局中元件較多或結構較為複雜時,ConstraintLayout 或其他佈局可能會更具效率。因此,了解如何選擇合適的佈局方式也是 Android UI 開發中的一項重要技能。

4. 總結

LinearLayout 是 Android 中最常用的佈局方式之一,它允許靈活地將子元件排列在水平方向或垂直方向上。透過學習 layout_weightgravity 等進階屬性,我們可以進一步控制子元件的排列方式。掌握這些技巧,將能夠讓你在設計 UI 時更加得心應手。


上一篇
# Day 19: 製作一個簡單的 BMI 計算器
下一篇
# DAY21 TabLayout 與 ViewPager 結合使用(一)
系列文
「淺入 Android Studio 開發環境」—— 工具與插件的高效使用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言